<!-- 通知发货 -->
<script setup>
import { ref, reactive } from 'vue'
// props
const props = defineProps({
  // 弹窗类型 1 通知发货 2 提货 
  type: {
    type: String,
    default: '1'
  },
  show: {
    type: Boolean,
    required: true
  },
  data: {
    type: Array,
    default: () => []
  }
})
// emits
const emit = defineEmits(['close', 'confirm'])

// 数据
const data = reactive({
  phoneNo: '',
  addressInfo: {

  }
})
// 关闭弹窗
const close = () => {
  emit('close')
}
// 提货
const notifyShipment = () => {

}
// 跳转地址
const goToAddress = () => {
  uni.navigateTo({
    url: '/subPackage/my/address/index'
  })
}
</script>

<script>
export default {
  options: { styleIsolation: "shared" },
};
</script>
<template>
  <!-- 弹窗-选择商品 -->
  <up-popup :show="props.show" :closeable="true" @close="close" :round="10">
    <view class="NotifyShipment-module">
      <view class="title">
        <text v-if="props.type == '1'">通知发货</text>
        <text v-else>提货信息</text>
      </view>
      <view class="cnt">
        <view class="address-box" @click="goToAddress">
          <view class="left">
            <image style="width: 40rpx;height: 40rpx;" src="/static/images/icons/location.png" mode="scaleToFill" />
            <view class="info-box">
              <view v-if="true" class="placeholder">
                <text>请输入收货地址...</text>
              </view>
              <template v-else>
                <view class="info">
                  <text class="name">张三</text>
                  <text class="phone-no">13275692915</text>
                </view>
                <view class="address">
                  <text>江苏省南京市六合区雄州街道王桥路59号雨庭广场六合科创中心一层102室</text>
                </view>
              </template>
            </view>
          </view>
          <view class="right">
            <up-icon name="arrow-right" color="#C8C9CD"></up-icon>
          </view>
        </view>
        <!-- 订单列表 -->
        <view class="list">
          <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-list">
            <view class="item" v-for="i in 2" :key="i">
              <view class="head">
                <text>订单号：132817492312134</text>
              </view>
              <!-- 商品列表 -->
              <view class="commodity--list">
                <view class="commodity-item" v-for="item in 2" :key="item">
                  <view class="left">
                    <view class="img-box">
                      <image style="width: 100rpx; height:100rpx;" src="https://cdn.uviewui.com/uview/goods/1.jpg"
                        mode="scaleToFill" />
                    </view>
                    <view class="info">
                      <view class="name">商品名称</view>
                      <view class="sku">规格：8瓶</view>
                    </view>
                  </view>
                  <view class="right">
                    <view class="price">¥200.00</view>
                    <view class="num-box">
                      <up-icon name="close" color="#000000" size="12"></up-icon>
                      <text class="num">1</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="tips">
          <up-icon name="info-circle" size="26rpx" color="#838385"></up-icon>
          <text>确认后商家将按照上方收货地址进行发货，您可在“我的订单”-“待发货”中查看发货进程</text>
        </view>
      </view>
      <!-- 底部栏 -->
      <view class="bottom-bar">
        <view class="content">
          <up-button :text="props.type == '1' ? '确认通知发货' : '确认提货'" type="primary" :disabled="false" shape="circle"
            @click="notifyShipment"></up-button>
        </view>
      </view>
    </view>

  </up-popup>
</template>

<style lang="scss" scoped>
.NotifyShipment-module {

  height: 968rpx;

  & .title {
    margin-top: 30rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    text-align: center;
  }

  // 内容
  & .cnt {
    padding: 32rpx;

    // 地址盒子
    & .address-box {
      display: flex;
      justify-content: space-between;
      padding: 40rpx 16rpx;
      border-bottom: 2rpx solid;
      border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;

      & .left {
        display: flex;

        & image {
          margin-top: 4rpx;
        }

        & .info-box {
          margin-left: 12rpx;
          width: 562rpx;

          // 地址为空
          & .placeholder {
            font-weight: 400;
            font-size: 32rpx;
            color: #81818A;
          }

          // 地址不为空
          & .info {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;

            & .phone-no {
              margin-left: 16rpx;

            }
          }

          & .address {
            margin-top: 8rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #9B9B9B;
          }
        }
      }
    }

    // 订单列表
    & .list {
      margin-top: 16rpx;

      & .scroll-list {
        height: 530rpx;

        & .item {
          padding: 24rpx;
          margin-bottom: 20rpx;
          background: #F9F9F9;
          border-radius: 12rpx;

          & .head {
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }

          // 商品列表
          & .commodity--list {
            & .commodity-item {
              margin-top: 24rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;

              & .left {
                display: flex;

                & .img-box {
                  width: 100rpx;
                  height: 100rpx;
                  border-radius: 10rpx;
                  overflow: hidden;
                }

                & .info {
                  margin-left: 20rpx;

                  & .name {
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #333333;
                  }

                  & .sku {
                    margin-top: 10rpx;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                  }
                }
              }

              & .right {

                & .price {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #333333;
                }

                & .num-box {
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  margin-top: 10rpx;
                  line-height: 24rpx;

                  &::v-deep .u-icon {
                    margin-top: 5rpx;
                  }

                  & text {
                    padding-left: 6rpx;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                  }
                }
              }
            }
          }
        }
      }
    }

    // 提示
    & .tips {
      margin-top: 24rpx;
      display: flex;

      &::v-deep .u-icon {
        margin-right: 6rpx;
        margin-top: 6rpx;
        align-items: flex-start;
      }

      & text {
        width: 616rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #838385;
      }
    }
  }

  // 底部栏
  & .bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 172rpx;
    background: #FFFFFF;
    border-top: 1rpx solid #E9E9EB;

    &::v-deep .content {
      box-sizing: border-box;
      padding: 12rpx 40rpx;

      & .u-button {
        height: 88rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        background: #FFA618;
        border-radius: 112rpx;
        border: none;
      }
    }
  }
}
</style>